<template>
  <div class="agent-container">
    <!-- 头部导航 -->
    <header class="chat-header">
      <button class="back-button" @click="goBack">
        ← 返回
      </button>
      <h1 class="chat-title">
        <span class="title-icon">🤖</span>
        AI超级智能体
      </h1>
      <div class="connection-status" :class="{ 'connected': isConnected }">
        {{ isConnected ? '已连接' : '未连接' }}
      </div>
    </header>

    <!-- 聊天消息区域 -->
    <main class="chat-messages" ref="messagesContainer">
      <div v-if="messages.length === 0" class="welcome-message">
        <div class="welcome-icon">🤖</div>
        <h3>欢迎来到AI超级智能体</h3>
        <p>我是您的全能AI助手，可以帮您解决各种问题，提供智能服务～</p>
      </div>
      
      <ChatMessage
        v-for="message in messages"
        :key="message.id"
        :message="message"
        theme="agent"
      />
      
      <!-- AI正在输入提示 -->
      <div v-if="isAiTyping" class="typing-indicator">
        <div class="typing-bubble">
          <div class="typing-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </main>

    <!-- 消息输入区域 -->
    <ChatInput
      theme="agent"
      placeholder="请输入您的问题..."
      :disabled="isAiTyping"
      :loading="isAiTyping"
      @send="handleSendMessage"
    />
    
    <!-- 底部栏 -->
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import ChatMessage from '../components/ChatMessage.vue';
import ChatInput from '../components/ChatInput.vue';
import AppFooter from '../components/AppFooter.vue';
import { SSEConnection, generateChatId, buildSSEUrl } from '../utils/sse';
import { createMessage, API_ENDPOINTS } from '../utils/api';
import type { Message } from '../utils/api';

const router = useRouter();
const messages = ref<Message[]>([]);
const messagesContainer = ref<HTMLElement>();
const chatId = ref<string>('');
const sseConnection = ref<SSEConnection | null>(null);
const isConnected = ref(false);
const isAiTyping = ref(false);
const currentAiMessage = ref('');

// 初始化聊天ID
onMounted(() => {
  chatId.value = generateChatId();
  console.log('AI超级智能体聊天室初始化，ChatID:', chatId.value);
});

// 清理SSE连接
onUnmounted(() => {
  if (sseConnection.value) {
    sseConnection.value.disconnect();
  }
});

// 返回主页
const goBack = () => {
  if (sseConnection.value) {
    sseConnection.value.disconnect();
  }
  router.push('/');
};

// 发送消息
const handleSendMessage = (messageContent: string) => {
  // 添加用户消息
  const userMessage = createMessage(messageContent, 'user', chatId.value);
  messages.value.push(userMessage);
  scrollToBottom();
  
  // 开始AI回复
  startAiResponse(messageContent);
};

// 开始AI回复
const startAiResponse = (question: string) => {
  // 完全清理之前的连接状态
  if (sseConnection.value) {
    sseConnection.value.disconnect();
    sseConnection.value = null;
  }
  
  // 重置所有状态
  isConnected.value = false;
  isAiTyping.value = true;
  currentAiMessage.value = '';
  
  // 创建新的AI消息占位符
  const aiMessage = createMessage('', 'ai', chatId.value);
  messages.value.push(aiMessage);
  
  // 构建SSE URL
  const sseUrl = buildSSEUrl(API_ENDPOINTS.AGENT_SSE, question, chatId.value);
  
  // 创建SSE连接
  sseConnection.value = new SSEConnection(sseUrl, {
    onOpen: () => {
      isConnected.value = true;
      console.log('AI超级智能体SSE连接已建立');
    },
    onMessage: (data: string) => {
      // 累积AI回复内容
      currentAiMessage.value += data;
      
      // 更新AI消息内容
      updateAiMessage();
      scrollToBottom();
    },
    onError: (error) => {
      console.error('SSE连接错误:', error);
      isConnected.value = false;
      isAiTyping.value = false;
      
      // 更新最后一条AI消息为错误信息
      const lastMessage = messages.value[messages.value.length - 1];
      if (lastMessage && lastMessage.sender === 'ai') {
        lastMessage.content = '服务器繁忙，请稍后重试。';
      }
      scrollToBottom();
      
      // 关闭连接
      if (sseConnection.value) {
        sseConnection.value.disconnect();
        sseConnection.value = null;
      }
    },
    onTimeout: () => {
      console.log('SSE连接超时 - 5分钟内未收到响应');
      isConnected.value = false;
      isAiTyping.value = false;
      
      // 更新最后一条AI消息为超时信息
      const lastMessage = messages.value[messages.value.length - 1];
      if (lastMessage && lastMessage.sender === 'ai') {
        lastMessage.content = '服务器繁忙，请稍后重试。';
      }
      scrollToBottom();
      
      // 连接会被自动关闭
      sseConnection.value = null;
    },
    onClose: () => {
      isConnected.value = false;
      isAiTyping.value = false;
      console.log('AI超级智能体SSE连接已关闭 - 流正常结束');
      sseConnection.value = null;
      
      // 确保AI消息内容已保存
      if (currentAiMessage.value.trim()) {
        updateAiMessage();
        scrollToBottom();
      }
    }
  });
  
  // 建立连接
  sseConnection.value.connect();
};

// 更新AI消息
const updateAiMessage = () => {
  if (currentAiMessage.value.trim()) {
    // 查找最后一条AI消息并更新内容
    const lastMessageIndex = messages.value.length - 1;
    const lastMessage = messages.value[lastMessageIndex];
    
    if (lastMessage && lastMessage.sender === 'ai' && lastMessage.chatId === chatId.value) {
      // 更新现有AI消息
      lastMessage.content = currentAiMessage.value;
      lastMessage.timestamp = new Date();
    }
  }
};

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick();
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
};
</script>

<style scoped>
.agent-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--color-bg-secondary);
  animation: fadeIn 0.5s ease-out;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-6);
  background: linear-gradient(135deg, var(--color-agent), var(--color-agent-dark));
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
}

.back-button {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(10px);
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-2px);
  box-shadow: var(--shadow-sm);
}

.chat-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  line-height: var(--line-height-tight);
}

.title-icon {
  font-size: var(--font-size-2xl);
  animation: pulse 2s infinite;
}

.connection-status {
  font-size: var(--font-size-xs);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  transition: var(--transition-base);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(10px);
}

.connection-status.connected {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-4) 0;
  scroll-behavior: smooth;
  background: var(--color-bg-primary);
}

.welcome-message {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-8);
  color: var(--color-text-secondary);
  animation: slideUp 0.6s ease-out;
}

.welcome-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-4);
  animation: bounce 2s infinite;
}

.welcome-message h3 {
  font-size: var(--font-size-2xl);
  color: var(--color-agent);
  margin-bottom: var(--spacing-4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.welcome-message p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  max-width: 500px;
  margin: 0 auto;
  color: var(--color-text-regular);
}

.typing-indicator {
  display: flex;
  justify-content: flex-start;
  padding: 0 var(--spacing-4);
  margin-bottom: var(--spacing-4);
  animation: slideUp 0.3s ease-out;
}

.typing-bubble {
  background: var(--color-gray-100);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-3) var(--spacing-4);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.typing-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-right: 8px solid var(--color-border-base);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.typing-dots {
  display: flex;
  gap: var(--spacing-1);
}

.typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-gray-500);
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式设计 */
/* 平板端 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .chat-header {
    padding: var(--spacing-3) var(--spacing-5);
  }
  
  .chat-title {
    font-size: var(--font-size-lg);
  }
  
  .title-icon {
    font-size: var(--font-size-xl);
  }
  
  .welcome-message {
    padding: var(--spacing-10) var(--spacing-6);
  }
  
  .welcome-icon {
    font-size: var(--font-size-3xl);
  }
  
  .welcome-message h3 {
    font-size: var(--font-size-xl);
  }
}

/* 手机端 (< 768px) */
@media (max-width: 767px) {
  .chat-header {
    padding: var(--spacing-3) var(--spacing-4);
  }
  
  .chat-title {
    font-size: var(--font-size-base);
  }
  
  .title-icon {
    font-size: var(--font-size-lg);
  }
  
  .back-button {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
  }
  
  .connection-status {
    font-size: 10px;
    padding: var(--spacing-1) var(--spacing-2);
  }
  
  .chat-messages {
    padding: var(--spacing-3) 0;
  }
  
  .welcome-message {
    padding: var(--spacing-8) var(--spacing-4);
  }
  
  .welcome-icon {
    font-size: var(--font-size-3xl);
  }
  
  .welcome-message h3 {
    font-size: var(--font-size-lg);
  }
  
  .welcome-message p {
    font-size: var(--font-size-sm);
    max-width: 300px;
  }
  
  .typing-indicator {
    padding: 0 var(--spacing-3);
  }
}

/* 小屏手机端 (< 480px) */
@media (max-width: 479px) {
  .chat-header {
    padding: var(--spacing-2) var(--spacing-3);
  }
  
  .chat-title {
    font-size: var(--font-size-sm);
  }
  
  .title-icon {
    font-size: var(--font-size-base);
  }
  
  .back-button {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: 10px;
  }
  
  .welcome-message {
    padding: var(--spacing-6) var(--spacing-3);
  }
  
  .welcome-icon {
    font-size: var(--font-size-2xl);
  }
  
  .welcome-message h3 {
    font-size: var(--font-size-base);
  }
  
  .welcome-message p {
    font-size: var(--font-size-xs);
    max-width: 250px;
  }
}

/* 大屏幕优化 (> 1280px) */
@media (min-width: 1280px) {
  .chat-header {
    padding: var(--spacing-5) var(--spacing-8);
  }
  
  .chat-title {
    font-size: var(--font-size-2xl);
  }
  
  .title-icon {
    font-size: var(--font-size-3xl);
  }
  
  .welcome-message {
    padding: var(--spacing-16) var(--spacing-10);
  }
  
  .welcome-message p {
    max-width: 600px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .back-button:hover {
    transform: none;
  }
  
  .back-button:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.4);
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
  .welcome-message {
    padding: var(--spacing-6) var(--spacing-4);
  }
  
  .welcome-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-2);
  }
  
  .welcome-message h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
  }
  
  .welcome-message p {
    font-size: var(--font-size-sm);
  }
}

/* 减少动画效果（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  .agent-container,
  .welcome-message,
  .typing-indicator,
  .title-icon,
  .welcome-icon {
    animation: none;
  }
  
  .back-button:hover {
    transform: none;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .chat-header {
    border-bottom: 2px solid var(--color-border-dark);
  }
  
  .typing-bubble {
    border: 2px solid var(--color-border-dark);
  }
  
  .connection-status {
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}
</style>